import React,{Component,PropTypes} from 'react'
import { findDOMNode } from 'react-dom'
import Util from '../../utils/requestAnimation.js'
import {disableScroll,enableScroll} from '../../utils/toggleScroll.js'

class TouchableBarChart extends Component{
    constructor(props, context){
        super(props, context)
    }

    componentDidMount(){
        this.canvas = findDOMNode(this);
        this.ctx = this.canvas.getContext('2d');
        this.running = false;
        this.color='green';
        this.x=10;
        this.y=10;
        this.width=100;
        this.height=100;
        this.randerRect();
    }

    init(props){
        // let ctx = this.ctx;
        this.running = false;
        this.color='green';
        this.x=10;
        this.y=10;
        this.width=100;
        this.height=100;
        this.randerRect();

    }
    randerRect(){
        this.ctx.fillStyle = this.color;
        this.ctx.fillRect(this.x,this.y,this.width,this.height);
    }

    getCursorPosition(e) {
        const {top, left} = this.canvas.getBoundingClientRect();
        // console.log(e)
        const t = e.touches[0]
        return [
            t.pageX - left,
            t.pageY - top
        ];
    }

    handleTouchStart(e){
        console.log('start....'+e.touches[0].pageX)
        disableScroll()
        // if (!running) {
        //     raf = window.requestAnimationFrame(draw);
        //     running = true;
        // }
        // document.body.style.height=window.innerHeight
    }

    handleTouchMove(e){
        console.log('move...')
        // this.a = this.getCursorPosition(e);
        var t = e.touches[0]
        if (!this.running) {
            // this.clear();
            // this.ctx.fillStyle = 'rgba(255,255,255,0.3)';
            // this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
            // this.x = t.pageX;
            this.y = t.pageY;
            this.randerRect();
        }

    }

    handleTouchEnd(e){
        // console.log('end...'+this.a[0])
        // console.log(this.a[1])
        // window.cancelAnimationFrame(this.raf);
        // this.rect.running = false;
        // enableScroll()
    }

    render(){
        const {width, height, canvasClassName} = this.props;
        return (
            <canvas className={canvasClassName}
                onTouchStart={this.handleTouchStart.bind(this)}
                onTouchMove={this.handleTouchMove.bind(this)}
                onTouchEnd={this.handleTouchEnd.bind(this)}
                width={width}
                height={height}
            ></canvas>
        )
    }
}

TouchableBarChart.propTypes={

}

export default TouchableBarChart
